.ribbon {
    margin-top: auto;
    height: 62px;

    display: flex;

    background-color: white;

    overflow: hidden;

    align-items: center;

    --ribbon-width: 1920px;
    --slide-offset: 20px;
}

.ribbon p {
    font-family: 'Bebas Neue';
    font-size: 25px;

    /* scroll */
    /* animation: text-scroll 15s linear infinite; */

    animation-name: text-scroll;
    /* animation-duration: calc(100%/1920s); */
    animation-timing-function: linear;
    animation-iteration-count: infinite;

    white-space: nowrap; /* important, pour que le texte dépasse */
}

@keyframes text-scroll {
    from {
        /* on commence à la largeur du ruban + un offset pour commencer un tout petit peu après  */
        transform: translateX(calc(var(--ribbon-width) + var(--slide-offset)));
    }
    to {
        /* idem, de l'autre côté, cette fois-ci avec la largeur de l'étément qui défile */
        transform: translateX(calc(-100% - var(--slide-offset)));
    }
}